<template>
  <view class="wyf">
    <view class="playerAll_choose">
      <text class="iconfont icon-bofangqi-bofangshu"></text>
      <text style="transform: translateX(-230rpx); line-height:70rpx; font-size:30rpx">播放全部</text>
      <text class="iconfont icon-xuanze-" style="font-size: 70rpx;"></text>
    </view>
    <scroll-view scroll-y @scrolltolower="scrollTolower" class="scroll">
      <view class="song_container">
        <view class="keysongInfo" v-for="item in keySongs" :key="item.id" @click="navPlayerSongs(item.id)">
          <text style="color: #668ebd;">{{ item.name }}</text>
          <text style="color: #989898;">{{ item.ar[0].name + ' - ' + item.al.name }}</text>
        </view>
      </view>
      <u-loadmore :status="status" icon-type />
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getSearchKeytype } from '@/api/getSearchKeytype.js'
export default {
  name: 'songs',
  data() {
    return {
      keySongs: [],
      status: 'loadmore',
      page: 1,
      totalPage: '',
       limit:10
    }
  },
  computed: {
    ...mapState(['keyValue'])
  },
  created() {
    setTimeout(() => {
      // this.getKeySongs(1)
      this.getKeySongs(1, this.keyValue,this.limit)
    }, 1000)
  },

  methods: {
    async getKeySongs(type, value,limit) {
      const { data: res } = await getSearchKeytype(type, value,limit)
      // async getKeySongs(type) {
      //   const { data: res } = await uni.$http.get('cloudsearch', {
      //     keywords: this.keyValue,
      //     type: type
      //   })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('单曲列表获取失败')
      this.totalPage = Math.ceil(res.result.songCount / res.result.songs.length)
      this.keySongs = res.result.songs
      // console.log(this.totalPage);
    },
    navPlayerSongs(id) {
      uni.navigateTo({
        url: '/subpkg/songs_detail/songs_detail?id=' + id
      })
    },
    scrollTolower() {
      if (this.page >= this.totalPage) {
        this.status = 'nomore'
        // console.log(2222)
        uni.showToast({
          title: '没有下一页了'
        })
      } else {
        setTimeout(() => {
          // console.log(1111)
          this.page++
          this.limit+=10
          this.status = 'loading'
          this.getKeySongs(1, this.keyValue,this.limit)
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 160rpx);
}
.playerAll_choose {
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  position: relative;
  bottom: -20rpx;
  overflow: hidden;
  background-color: #fefefe;
}
.iconfont {
  margin: 0 10rpx;
  width: 80rpx;
  height: 80rpx;
}
.icon-bofangqi-bofangshu {
  font-size: 70rpx;
}
.wyf {
  background-color: #fefefe;
  // height: 800rpx;
}
.keysongInfo {
  display: flex;
  flex-direction: column;
  margin: 30rpx;
}
</style>
